package myJs.search.detail

import myJs.Implicits._
import myJs.cps._
import myJs.myPkg.MyFetch
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.web.html._

import scala.collection.immutable.SeqMap
import scala.scalajs.js
import scala.scalajs.js.Dynamic.{global => g}
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import typings.csstype.csstypeStrings

/**
 * Created by yz on 21/1/2022
 */
@react object MFilterCp {

  case class Props(phenotypes: List[String], phenotypesChange: List[String] => Unit, datasets: List[String],
                   datasetsChange: List[String] => Unit, pName: String = "phenotypes", dName: String = "datasets",
                   models: List[String], modelsChange: List[String] => Unit, mName: String = "models",
                   datasetMap: SeqMap[String, String], modelMap: SeqMap[String, String])

  val initPhenotypes =List("Fetal", "Normal", "Fatty Liver", "NAFLD", "Viral Hepatitis", "Fibrosis", "Control", "HCC", "HB", "Ductular Proliferation", "IPNB", "ICC")

  val phenotypeMap = initPhenotypes.optionMap

  val component = FunctionalComponent[Props] { props =>

    object FTool {

      def selectAll(curGroup: String) = () => {
        curGroup match {
          case "Phenotype" =>
            props.phenotypesChange(initPhenotypes)
          case "Dataset" =>
            props.datasetsChange(props.datasetMap.keyList)
          case "Phenotype_model" =>
            props.modelsChange(props.modelMap.keyList)
        }
      }

      def phenotypesChange = (vs: List[String]) => {
        props.phenotypesChange(vs)
      }

      def datasetsChange = (vs: List[String]) => {
        props.datasetsChange(vs)
      }

      def modelsChange = (vs: List[String]) => {
        props.modelsChange(vs)
      }

    }

    div(

      div(style := Style(marginRight = 15), className := "form-group",
        label(style := Style(),
          className := "control-label ",
          "Select Phenotype",
        ),
        div(style := Style(width = "100%"),
          PureSelect2MulCp(optionMap = phenotypeMap, value = props.phenotypes, onChange = FTool.phenotypesChange,
            width = "100%", name = props.pName, allowClear = true),
        ),
        div(style := Style(marginTop = 5, display = csstypeStrings.flex, justifyContent = csstypeStrings.`flex-end`),
          button(style := Style(marginRight = "5px", padding = "3px 6px"), `type` := "button",
            className := "btn btn-default mySelect", "Select All", onClick := FTool.selectAll("Phenotype"))
        )
      ),

      div(style := Style(marginRight = 15), className := "form-group",
        label(style := Style(),
          className := "control-label ",
          "Select Dataset",
        ),
        div(style := Style(width = "100%"),
          PureSelect2MulCp(optionMap = props.datasetMap, value = props.datasets, onChange = FTool.datasetsChange,
            width = "100%", name = props.dName, allowClear = true),
        ),
        div(style := Style(marginTop = 5, display = csstypeStrings.flex, justifyContent = csstypeStrings.`flex-end`),
          button(style := Style(marginRight = "5px", padding = "3px 6px"), `type` := "button",
            className := "btn btn-default mySelect", "Select All", onClick := FTool.selectAll("Dataset"))
        )
      ),

      div(style := Style(marginRight = 15), className := "form-group",
        label(style := Style(),
          className := "control-label ",
          "Select Model",
        ),
        div(style := Style(width = "100%"),
          PureSelect2MulCp(optionMap = props.modelMap, value = props.models, onChange = FTool.modelsChange, name = props.mName,
            width = "100%", allowClear = true)
        ),
        div(style := Style(marginTop = 5, display = csstypeStrings.flex, justifyContent = csstypeStrings.`flex-end`),
          button(style := Style(marginRight = "5px", padding = "3px 6px"), `type` := "button",
            className := "btn btn-default mySelect", "Select All",
            onClick := FTool.selectAll("Phenotype_model")),
        )
      ),

    )


  }

  object STool {


  }

}
